<template>
	<!-- 个人认证 -->
	<view class="">
		<cu-custom :bgcolor="'#fff'" />
		<scroll-view scroll-y="true" :style="'height:'+scorllHeight+ 'px;'">
			<uni-forms :modelValue="formData" label-position="top" :rules="rules" ref="form" err-show-type="toast">
				<view class="pdf-box p-2 pb-4">
					<view class="pl-2 pr-2">
						<uni-forms-item required label="分类名称" name="cat_name" label-width="120">
							<uni-easyinput type="text" v-model="formData.cat_name" placeholder="请输入分类名称" />
						</uni-forms-item>
						<uni-forms-item required name="parent_id" label="上级分类" label-width="120">
							<uni-data-picker placeholder="请选择分类" popup-title="请选择分类" :localdata="shopClassList"
								v-model="formData.parent_id" @change="onchange" @nodeclick="onnodeclick"
								@popupopened="onpopupopened" @popupclosed="onpopupclosed">
							</uni-data-picker>
						</uni-forms-item>
						<!-- <uni-forms-item name="measure_unit" label="数量单位" label-width="120">
							<uni-easyinput type="text" v-model="formData.measure_unit" placeholder="请输入数量单位" />
						</uni-forms-item> -->
						<uni-forms-item required name="sort_order" label="排序" label-width="120">
							<uni-easyinput type="number" v-model="formData.sort_order" placeholder="请输入排序" />
						</uni-forms-item>
					</view>
					<view class="upload-box p-2">
						<uni-forms-item required name="is_show" label="是否显示" label-width="120">
							<radio-group class="d-flex" @change="isShow">
								<label v-for="(item, index) in items" :key="item.value" class="d-flex">
									<view>
										<radio :value="item.value" :checked="index == current"
											style="transform:scale(0.7)" />
									</view>
									<view>{{item.name}}</view>
								</label>
							</radio-group>
						</uni-forms-item>
						<uni-forms-item required name="show_in_nav" label="是否显示在导航栏" label-width="200">
							<radio-group class="d-flex" @change="showInNav">
								<label v-for="(item, index) in items" :key="item.value" class="d-flex">
									<view>
										<radio :value="item.value" :checked="index == showInnav"
											style="transform:scale(0.7)" />
									</view>
									<view>{{item.name}}</view>
								</label>
							</radio-group>
						</uni-forms-item>
						<!-- <uni-forms-item required name="is_show_cat_pic" label="设置为首页推荐" label-width="200">
							<uni-data-checkbox v-model="form.is_show_cat_pic" :localdata="showCatLIst"></uni-data-checkbox>
						</uni-forms-item> -->
						<uni-forms-item required name="is_show_cat_pic" label="是否设置为首页推荐" label-width="200">
							<radio-group class="d-flex" @change="showCatPic">
								<label v-for="(item, index) in items" :key="item.value" class="d-flex">
									<view>
										<radio class="d-flex" :value="item.value" :checked="index == showIndex"
											style="transform:scale(0.7)" />
									</view>
									<view>{{item.name}}</view>
								</label>
							</radio-group>
						</uni-forms-item>
						<!-- <uni-forms-item label="上传店铺此类广告" label-width="200">
							<view class="id d-flex flex-row j-sb">
								<uploadImage :limit="1" headTitle="" class="flex-1" @imgurl="getImgUrl" />
							</view>
						</uni-forms-item> -->
						<uni-forms-item name="cat_pic_url" label="店铺广告链接" label-width="200">
							<uni-easyinput type="text" v-model="formData.cat_pic_url" placeholder="请输入店铺广告链接" />
						</uni-forms-item>
						<uni-forms-item required name="cat_goods_limit" label="此类商品展示数量" label-width="200">
							<uni-easyinput type="number" v-model="formData.cat_goods_limit" placeholder="请输入排序" />
						</uni-forms-item>
						<!-- <uni-forms-item name="filter_attr" label="筛选属性" label-width="120" style="position: relative;">
							<uni-tooltip ref="tooltip" placement="bottom"
								style="position: absolute;top: -66rpx;left: 135rpx; width: 500rpx; z-index: 80;">
								<view class="iconfont icon-bangzhu text-muted"></view>
								<template v-slot:content>
									<view class="uni-stat-tooltip">
										筛选属性可在当前分类页面进行筛选商品
									</view>
								</template>
							</uni-tooltip>
							<uni-data-select class="mb-1" v-model="formData.filter_attr" placeholder="请选择属性"
								:localdata="bankNameList" @change="change"></uni-data-select>
							<view class="mb-1"></view>
							<uni-data-select v-model="formData.name" placeholder="请选择属性" :localdata="bankNameList"
								@change="change"></uni-data-select>
						</uni-forms-item> -->

						<!-- <uni-forms-item name="grade" label="价格区间数" label-width="120" style="position: relative;">
							<uni-tooltip ref="tooltip" placement="bottom"
								style="position: absolute;top: -66rpx;left: 165rpx; width: 500rpx;z-index: 80;">
								<view class="iconfont icon-bangzhu text-muted"></view>
								<template v-slot:content>
									<view class="uni-stat-tooltip">
										该选项表示该分类下商品最低价与最高价之间的划分的等级个数，
										填0表示不做分级，最多不能超过10个。
									</view>
								</template>
							</uni-tooltip>
							<uni-easyinput type="number" v-model="formData.grade" placeholder="请输入价格区间数" />

						</uni-forms-item> -->
						<!-- <uni-forms-item name="style" label="分类样式表" label-width="120" style="position: relative;">
							<uni-tooltip ref="tooltip" placement="bottom"
								style="position: absolute;top: -66rpx;left: 165rpx; width: 500rpx;z-index: 80;">
								<view class="iconfont icon-bangzhu text-muted"></view>
								<template v-slot:content>
									<view class="uni-stat-tooltip">
										您可以为每一个商品分类指定一个样式表文件。例如文件
										存放在 themes 目录下则输入：themes/style.css
									</view>
								</template>
							</uni-tooltip>
							<uni-easyinput type="text" v-model="formData.style" />
						</uni-forms-item> -->
						<uni-forms-item name="keywords" label="关键字" label-width="120">
							<uni-easyinput type="text" v-model="formData.keywords" placeholder="请输入关键字" />
						</uni-forms-item>
						<uni-forms-item name="cat_desc" label="分类描述" label-width="120">
							<uni-easyinput type="textarea" autoHeight v-model="formData.cat_desc"
								placeholder="请输入分类描述" />
						</uni-forms-item>
					</view>
					<view class="button-box p-2">
						<button class="main-bg-color text-white font-md" @click="submit">确认</button>
					</view>
				</view>
			</uni-forms>

		</scroll-view>
	</view>
</template>

<script>
	import title from "@/components/common/title.vue"
	import validate from "@/utils/validate.js"
	import uploadImage from "@/components/common/uploadImage.vue"
	import cuCustom from '@/components/common/custom.vue'
	import interceptor from "@/utils/request.js"
	export default {
		components: {
			title,
			uploadImage,
			cuCustom
		},
		data() {
			return {
				active: 1,
				scorllHeight: 500,
				imageValue: [],
				formData: {
					cat_name: "",
					parent_id: null,
					measure_unit: "",
					sort_order: 50,
					is_show: 0,
					show_in_nav: 0,
					is_show_cat_pic: 0,
					cat_pic: "",
					cat_pic_url: "",
					cat_goods_limit: 8,
					filter_attr: "",
					grade: 8,
					style: "",
					keywords: "",
					cat_desc: ""
				},
				rules: {
					// 对name字段进行必填验证
					cat_name: {
						rules: [{
							required: true,
							errorMessage: '请输入分类名称',
						}]
					},
					parent_id: {
						rules: [{
							required: true,
							errorMessage: '请选择上级分类',
						}]
					},
					sort_order: {
						rules: [{
							format: 'number',
							errorMessage: '请输入排序',
						}]
					},
					is_show: {
						rules: [{
							required: true,
							errorMessage: '请选择是否显示',
						}]
					},
					is_show_cat_pic: {
						rules: [{
							required: true,
							errorMessage: '请选择是否显示',
						}]
					},
					cat_goods_limit: {
						rules: [{
							required: true,
							errorMessage: '请输入数量',
						}]
					}

				},
				items: [{
						value: 0,
						name: '否'
					},
					{
						value: 1,
						name: '是'
					}
				],
				current: 0,
				showInnav: 0,
				showIndex: 0,
				shopClassList: [],
				selectItem: null, //暂存选择的内容 
				isEdit: false,
				catId:null
			}
		},
		onLoad(e) {
			if (e && e.id) {
				this.isEdit = true
				this.catId = e.id
			}
			uni.getSystemInfo({
				success: (res => {
					this.scorllHeight = res.windowHeight - uni.upx2px(0)
				})
			})
			this.getShopClassList()
		},
		onShow() {
			if (this.isEdit) {
				this.getClassItemInfo()
			}
		},
		methods: {
			// 触发提交表单
			submit() {
				let _that = this
				_that.$refs.form.validate().then(res => {
					let params = Object.assign({}, {
						supplier_id: uni.getStorageSync('supplier_id')
					}, _that.formData)
					if (_that.isEdit) {
						_that.submitEditClass(params)
					} else {
						interceptor.get('/supplier_applet_api.php?act=addCategory', params).then((res) => {
							if (res.status === 1) {
								uni.showToast({
									title: "添加成功",
									icon: "success",
									success() {
										uni.navigateBack()
									}
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: "error"
								})
							}
						})
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
				// uni.navigateTo({
				// 	url: './shopAuth'
				// })
			},
			// 编辑分类
			submitEditClass(params) {
				let query = Object.assign({}, params, {
					cat_id: this.catId
				})
				interceptor.get("/supplier_applet_api.php?act=editCategorySub", query).then((res) => {
					if (res.status === 1) {
						uni.showToast({
							title: "编辑成功",
							icon: "success",
							success() {
								uni.navigateBack()
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"

						})
					}
				})
			},

			checkIdCard(number) {
				let isIdcard = validate.isValidChineseID(number)
				if (!isIdcard) {
					uni.showToast({
						title: "身份证号码有误请检查",
						icon: 'none'
					})
				}
			},
			addDomain() {
				this.formGGData.dynamicLists.push({
					sizeName: "",
					price: "",
					weight: null,
					store: null,
					id: Date.now()
				})
			},
			del(index) {
				this.formGGData.dynamicLists.splice(index, 1)
			},
			// 获取分类列表
			getShopClassList() {
				this.shopClassList = []
				interceptor.get('/supplier_applet_api.php?act=cateList', {
					supplier_id: uni.getStorageSync("supplier_id")
				}).then((res) => {
					if (res.status === 1) {
						const {
							info
						} = res
						let catList = JSON.parse(JSON.stringify(info.cat_info))
						// this.shopClassList = catList
						catList.map((item) => {
							item.text = item.cat_name
							item.value = item.cat_id
							item.children = item.childrenDisable
						})
						catList.unshift({
							text: "顶级分类",
							value: 0
						})
						this.shopClassList = catList
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 分类选择器
			onnodeclick(e) {
				// 暂存选中的内容
				this.formData.parent_id = e.value
			},

			getImgUrl(value) {
				this.formData.cat_pic = value
			},
			isShow(e) {
				this.current = e.detail.value
				this.formData.is_show = e.detail.value
			},
			showInNav(e) {
				this.showInnav = e.detail.value
				this.formData.show_in_nav = e.detail.value
			},
			showCatPic(e) {
				this.showIndex = e.detail.value
				this.formData.is_show_cat_pic = e.detail.value
			},
			// 根据ID 获取详情
			getClassItemInfo() {
				let params = {
					supplier_id: uni.getStorageSync('supplier_id'),
					cat_id: this.catId
				}
				interceptor.get('/supplier_applet_api.php?act=editCategory', params).then((res) => {
					if (res.status === 1) {
						this.formData = Object.assign({}, this.formData, res.info.cat_info)
						this.showIndex = this.formData.is_show_cat_pic
						this.showInnav = this.formData.show_in_nav
						this.current = this.formData.is_show
						this.$forceUpdate()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.step-box {
		background: #F8F8F8;
	}

	.button-box {
		// position: absolute;
		// bottom: 0;
		background: #F8F8F8;
		height: 100upx;
		width: 100%;
		box-sizing: border-box;
	}

	.radio {
		display: flex;
		flex-direction: row;
		align-items: center;

		checkbox {
			border-radius: 15rpx;
			/* 可以根据需要调整圆角的大小 */
		}
	}

	.uni-list-cell {
		justify-content: flex-start
	}

	.upload-box {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	::v-deep .uni-section {
		.uni-section-header {
			padding: 0 !important;
		}
	}

	.size {
		padding: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: #f2f2f2;

		.size-box {
			padding: 20upx;
			flex: 1;

			::v-deep .uni-easyinput__content {
				height: 60upx !important;
			}
		}

		.size-btn {
			width: 200upx;
			display: flex;
			flex-direction: row;
		}
	}

	::v-deep .uni-forms-item {
		.uni-forms-item__label {
			font-weight: 500;
			font-size: 30rpx;
			color: #393F4C;
		}

		.uni-easyinput__content {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-select {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-date-x--border {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-date-x {
			background: transparent !important;
		}
	}

	.button-box {
		// position: absolute;
		// bottom: 0;
		background: #F8F8F8;
		height: 100upx;
		width: 100%;
		box-sizing: border-box;
	}
	::v-deep .input-value-border{
		border: 0;
		border-bottom: 2px solid #E1E5ED !important;
		border-radius: 0;
	}
</style>